<template>
	<view>
		<view id="profile">
			<view class="bgc">
				<image class="bgcimage" :src="bgcTop"></image>
			</view>
			<view id="myinfor">
				<view id="head" @click="LoginForWechat">
					<image :src="avatarUrl" class="headphoto"></image>
					<view class="nickname">
						<text v-if="openid===''">请先登录</text>
						<text v-else>{{nickName}}</text>
					</view>
					<view class="phone">
						<!-- <text>15197391362</text> -->
					</view>
				</view>
				<view id="card" class="card">
					<view class="li" @click="navToPage('order')">
						<view class="liimg1">
							<image class="liimage" src="../../static/profile_icon/dingdan.png"></image>
						</view>
						<view class="lititle">
							<text>我的订单</text>
						</view>
						<view class="liimg2">
							<image class="liimage" src="../../static/profile_icon/right.png"></image>
						</view>
					</view>
					<view class="li" @click="navToPage('address')">
						<view class="liimg1">
							<image class="liimage" src="../../static/profile_icon/dizhi.png"></image>
						</view>
						<view class="lititle">
							<text>收货地址</text>
						</view>
						<view class="liimg2">
							<image class="liimage" src="../../static/profile_icon/right.png"></image>
						</view>
					</view>
					<view class="li" @click="navToPage('MyInformation')">
						<view class="liimg1">
							<image class="liimage" src="../../static/profile_icon/zhanghu.png"></image>
						</view>
						<view class="lititle">
							<text>我的资料</text>
						</view>
						<view class="liimg2">
							<image class="liimage" src="../../static/profile_icon/right.png"></image>
						</view>
					</view>
					<view class="li" style="border-bottom:none" @click="navToPage('confirmOrder')">
						<view class="liimg1">
							<image class="liimage" src="../../static/profile_icon/shiyongxuzhi.png"></image>
						</view>
						<view class="lititle">
							<text>使用须知</text>
						</view>
						<view class="liimg2">
							<image class="liimage" src="../../static/profile_icon/right.png"></image>
						</view>
					</view>
					<view style="height: 3vh;width: 100%;"></view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "Profile",

		data() {
			return {
				bgcTop: "http://47.106.199.123:8080/pictures/static/profile/bg0.png",
				localtoken: '',
				nickName: '靓仔',
				openid: '',
				avatarUrl: 'https://s1.328888.xyz/2022/07/03/0ym5.jpg'
			}
		},

		onLoad() {

		},
		onHide() {

		},
		onShow() {

			console.log("aaa:" + this.$store.state.IP)
			this.openid = uni.getStorageSync('openid');
			this.avatarUrl = uni.getStorageSync('avatarUrl')
			this.nickName = uni.getStorageSync('nickName')

		},

		methods: {
			LoginForWechat() {

				var _this = this
				if (_this.openid === '') {
					wx.login({
						success(res) {
							// console.log("res:"+res)
							if (res.code) {
								// 获取到code后进行下一步操作，通过服务器后端get请求auth.code2Session链接获取openid
								wx.request({
									url: _this.$store.state.IP + 'accounts/openId',

									method: 'GET',
									data: {
										code: res.code
									},
									success(res) {
										console.log('openid', res.data.openid)
										_this.openid = res.data.openid
										// 将openid存入本地缓存，减少用户频繁登录次数
										wx.setStorage({
											key: "openid",
											data: res.data.openid
										})
									}
								})
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})

					return new Promise((resolve, reject) => {
						uni.getUserProfile({
							lang: 'zh_CN',
							desc: '用户登录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，
							success: (res) => {
								console.log(res)
								console.log("res.userInfo.avatarUrl:" + res.userInfo.avatarUrl)
								_this.avatarUrl = res.userInfo.avatarUrl
								_this.nickName = res.userInfo.nickName

								wx.setStorage({
									key: "nickName",
									data: res.userInfo.nickName
								})

								wx.setStorage({
									key: "avatarUrl",
									data: res.userInfo.avatarUrl
								})

								uni.request({
									url: _this.$store.state.IP + "accounts/add",
									data: {
										"openId": _this.openid,
										"nickName": _this.nickName,
										"avatar": _this.avatarUrl
									}
								})

							},
							fail: (err) => {
								reject(err)
							}
						})
					})
				} else {
					console.log("already login!")
				}
			},

			navToPage(page) {

				console.log("page" + page)
				uni.navigateTo({
					url: "../" + page + "/" + page
				})
			},


			testForLogin() {
				// this.weixinLogin()
			},

			login() {

				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log("loginRes:" + loginRes.authResult);
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								console.log('用户昵称为：' + infoRes.userInfo.nickName);
							}
						});
					}
				});
			},


			getLogin() {
				return new Promise((resolve, reject) => {
					uni.login({
						success(res) {
							console.log(res, 'res')
							resolve(res)
						},
						fail: (err) => {
							console.log(err, 'logoer')
							reject(err)
						}
					})
				})
			},

			weixinLogin() {
				let that = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						//支持微信、qq和微博等
						if (~res.provider.indexOf('weixin')) {
							console.log(res, 'ress')
							let userInfo = that.getUserInfo();
							let loginRes = that.getLogin();
							Promise.all([userInfo, loginRes]).then((result) => {
								let userInfo = result[0];
								let loginRes = result[1];
								let access_token = loginRes.authResult.access_token;
								let openid = loginRes.authResult.openid;
								let data = Object.assign(loginRes.authResult, userInfo);
								that.$store.dispatch('Login', {
									type: 'weixin',
									url: that.url,
									data
								}).then(r => {
									if (r == 'ok') {
										uni.hideLoading()
									}
								}).catch(err => {
									uni.hideLoading();
									uni.showToast({
										icon: 'none',
										title: err
									})
								})
							})
						}
					},
					fail: function(err) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: err
						})
					}
				})
			},


		}
	}
</script>

<style scoped>
	#profile {
		background-color: #f0f0f0;
		min-height: 100vh;
		height: auto;
		/* padding-bottom: 2vh; */
		position: relative;
	}

	.bgc {
		height: 50vh;
		overflow: hidden;
	}

	.bgcimage {
		width: 100vw;
		height: 100vh;
	}

	#myinfor {
		z-index: 1;
		position: absolute;
		margin: 0 8vw;
		/* height: 65vh; */
		width: 84vw;
		background-color: #ffffff;
		bottom: 5vh;
		left: 0;
		right: 0;
		top: auto;
	}

	#head {
		text-align: center;
		margin-bottom: 3vh;
	}

	.headphoto {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		border: 10rpx #77aa44 solid;
		margin-top: 2vh;
	}

	.nickname {
		font-size: 40rpx;
		font-weight: bold;
		margin: 1vh 0;
	}

	.phone {
		font-size: 30rpx;
		margin: 1vh 0;
	}

	.card {
		background-color: #ffffff;

		/* margin-top: 3vh; */
	}

	.li {
		margin: 0 3vw;
		padding: 3vw 0;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		border-bottom: 4rpx #f0f0f0 solid;
		border-top: none;
	}

	.liimage {
		width: 40rpx;
		height: 40rpx;
	}

	.liimg1 {
		flex-grow: 1;
		padding: 1vh;
	}

	.lititle {
		flex-grow: 9;
		font-size: 36rpx;
		padding: 1vh;
	}

	.liimg2 {
		flex-grow: 1;
		padding: 1vh;
	}
</style>
